<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="reset.css" />
		<link rel="stylesheet" href="../font/css/all.css" />
		<style>
			/*设置外层容器*/
			.outer{
				width: 240px;
				margin:100px auto;
				box-shadow:0 0 10px rgba(0,0,0,.3);
			}
			.img-wrapper{
				width: 100%;
				vertical-align: bottom;
			}
			/*设置标题*/
			.info{
				padding: 0 18px;
			}
			.info .title{
				color: #717171;
				font-size: 18px;
				margin: 13px 0 15px 0;
				
			}
			.info .category{
				color: #acaaaa;
				font-size: 14px;
				
			}
			.info .category i{
				margin-right: 10px;
				padding-left: 4px;
			}
			.info .intro{
				font-size: 13px;
				color: #acaaaa;
				margin: 25px 0 20px 0;
				
			}
			.star-wrapper{
				height: 46px;
				border: 1px solid #e9e9e9;
				line-height: 46px;
				padding: 0 25px 0 16px;
			}
			.star{
				float: left;
			
			}
			 .facebook{
				float: right;
				
				color: #d6d6d6;
			}
			.star .ab{
				color: #b9cb41;
			}
			.star .cd{
				color: #dddddd;
			}
		</style>
	</head>
	<body>
		<!--创建一个外层容器-->
		<div class="outer">
			<!--创建图片容器-->
			<div class="img-wrapper">
				<!--设置图片-->
				<img src="img/1-1.jpg" alt="" />
			</div>
			<!--创建内部容器-->
			<div class="info">
				<h2 class="title">Animation films</h2>
				<h3 class="category">
					<i class="fas fa-map-marker-alt"></i>Animations</h3>
				<p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
			</div>
			<!--创建评分容器-->
			<div class="star-wrapper">
				<!--创建星星-->
				<ul class="star">
					<li class="fas fa-star ab"></li>
					<li class="fas fa-star ab"></li>
					<li class="fas fa-star cd"></li>
					<li class="fas fa-star cd"></li>
				</ul>
				<ul class="facebook">
					<li class="fab fa-facebook"></li>
				</ul>
			</div>
		</div>
	</body>
</html>
